<template>
    <div class="yousport-person-homepage">

        <div class="page-navbar">
            <ysHomePageHeader :backgroundImg="frontCover" :avatar="avatar" :name="name" :dept="depName" ></ysHomePageHeader>
            <ysChart :labels="labels" :data="data" :showTip="showTip" :step="step" :memberId="memberId" :rank="rank"></ysChart>
            <div class="yousport-star-wrapper" @click="praiseAction" >
            	<i class="iconfont icon-heart" :class = "{'praised':praised}"></i><span class="yousport-start-count">{{praiseCount}}</span>
            </div>
            <div class="yousport-star-label">为TA点赞</div>
        </div>

    </div>
</template>

<script>
    import ysHomePageHeader from '../component/ys-homepageheader.vue'
    import ysChart from '../component/ys-chart.vue'
    import config from '../assets/config.js'
    import util from '../assets/util'
    import bridge from '../bridge'
    import { MessageBox } from 'mint-ui';

    export default {

        data() {
            return {
                homePageUrl: config.host + config.homePageUrl,
                upVoteUrl: config.host + config.upVoteUrl,
                avatar: "",
                frontCover:{
                    backgroundImage:''
                },
                praiseCount: 0,
                memberId:'',
                name:"",
                praised:false,
                isPraising:false,
                labels:[],
                data:[],
                step:0,
                id:0,
                showTip:'今日步数',
                depName:'',
                rank:0
            };
        },

        beforeRouteUpdate (to, from, next) {
            this.initData();
            next();
        },

        created() {


        },
        activated() {
            this.initData();
            this.initChart();
            this.initHeader();
        },
        methods:{
            initData() {
                var res = util.session.get('rowData');
                if(res.depName) {
                    this.depName = res.depName;
                }
                if (res.avatar) {
                    this.avatar = res.avatar;
                } else {
                    this.avatar = '';
                }
                if (res.frontCover) {
                    this.frontCover = {
                        backgroundImage:'url('+ res.frontCover +')'
                    }
                } else {
                    this.frontCover = {
                        backgroundImage:''
                    };
                }

                if (res.memberId) {
                    this.memberId = res.memberId;
                }
                if (res.name) {
                    this.name = res.name;
                }


            },
            initHeader() {

                let me = this;
                bridge.client.configNavBar(function () {

                }, {centerItems:[{title: me.name + '的主页'}],rightItems:[]});

            },

            initChart() {
                let me = this;
                this.$http.get(config.host + config.getSevenDayPerStep, {
                    params:{
                        memberId:this.memberId
                    }
                }).then((res)=> {
                    this.step = res.data.today.stepCount;
                    let labels = [];
                    let stepData = [];
                    let list = res.data.list;
                    if(list.length) {
                        list.forEach((item, index)=> {
                            let date = new Date(item.createTime);
                            if(index + 1 === list.length){
                                labels.push(date.getMonth() + 1 + '月' + date.getDate());
                            } else {
                                labels.push(date.getDate());
                            }
                            stepData.push(item.stepCount);

                        })
                        me.labels = labels.reverse();
                        me.data = stepData.reverse();
                        me.praised = res.data.today.isUpVote;
                        me.id = res.data.today.id;
                        me.stepCount = res.data.today.stepCount;
                        me.rank = res.data.today.rowno;
                        if(res.data.today.upVote > 9999){
                            me.praiseCount = 9999 + "+";
                        }else {
                            me.praiseCount = res.data.today.upVote;
                        }


                    }

                })
            },

            praiseAction() {
                if (this.isPraising) {
                    return;
                }
                if(!this.id) return MessageBox({title: '提示',
                    message: '该用户今天暂无记录',
                    showCancelButton: true});
                this.isPraising = true;


                var me = this;
                this.$http.post(this.upVoteUrl,
                    {id : this.id}
                ).then((res)=>{
                    if (res.data.code === 0) {
                        let upVote = res.data.data.upVote;
                        me.praiseCount = upVote > 9999 ? '9999+' : upVote;
                        me.praised = res.data.data.isUpVote;
                    }
                    this.isPraising = false;
                }).catch((res) => {
                    this.isPraising = false;
                });
            }
        },
        components:{
           	ysHomePageHeader, ysChart
        }
    };
</script>

<style>
	.yousport-person-homepage {
	    width: 100%;
	    height: 100%;
	    background: #F5F5F5;
	    text-align: center;
	}
    .ys-chart {
        margin-top: 17px;
    }
    .yousport-star-wrapper {
    	width: 100px;
    	height: 45px;
    	border-radius: 22px;
    	color: #CCCCCC;
    	background-color: #FFFFFF;
    	margin-top: 15px;
    	display: inline-block;
    	line-height: 45px;
    	box-shadow: 0px 2px 10px #e2e2e2;
    }
    .praised {
        color: #FB5E71;
    }
    .icon-heart {
    	font-size: 24px;
    	vertical-align: middle;
    }
    .yousport-start-count {
    	font-size: 14px;
    	margin-left: 8px;
    }
    .yousport-star-label {
        color: #9E9E9E;
        font-size: 13px;
        padding: 10px 0 15px;
    }
    .yousport-frontcover-default{
      background: #4E4E4E url('../assets/img/bg.png') no-repeat center;
      background-size: 60% !important;
    }
</style>
